<template>
  <div>
    <el-tabs class="tabs" v-model="activeName">
      <el-tab-pane label="公告与功能配置" name="1">
        <div class="titles">
          <div class="border"></div>
          <div class="title">当前功能运行状态</div>
        </div>
        <div class="cont">
          <div class="lists">
            <div
              :class="[
                'list',
                item.status == 1 && item.currentState == 1 ? '' : 'list1',
              ]"
              v-for="(item, index) in curList"
              :key="index"
            >
              <div class="modes">
                <div class="deliverys">
                  <!-- 到店自提 -->
                  <img
                    :class="['img', item.status == 0 ? 'gray' : '']"
                    :src="getIcon(item)"
                  />
                  <div>
                    <div class="deliverysTitle">{{ item.name }}</div>
                    <div
                      class="deliverysText"
                      :class="[item.status == 0 ? 'gray' : '']"
                    >
                      {{ item.remark }}
                    </div>
                  </div>
                </div>
                <div
                  :class="['deliverysBtn', item.status == 0 ? 'gray' : '']"
                  @click="change(item, item.id)"
                >
                  <i class="el-icon-switch-button"></i>
                </div>
              </div>
              <div class="status">
                <div class="statusName">开启状态:</div>
                <div
                  class="statusText"
                  :style="{ color: item.status == 1 ? '#1890FF' : '#D1291B' }"
                >
                  {{ item.status == 1 ? "运行中" : "禁用中" }}
                </div>
              </div>
              <div class="status">
                <div class="statusName">当前状态:</div>
                <div
                  class="statusText"
                  :style="{
                    color: item.currentState == 1 ? '#1890FF' : '#D1291B',
                  }"
                >
                  {{ item.currentState == 1 ? "启用中" : "已停用" }}
                </div>
              </div>
              <div class="status">
                <div class="statusName">运行方式:</div>
                <div :class="['statusText', item.status == 0 ? 'gray' : '']">
                  <el-tag
                    :type="item.runMode == 1 ? 'success' : 'danger'"
                    effect="dark"
                  >
                    {{ item.runMode == 1 ? "时间段内启用" : "时间段内停用" }}
                  </el-tag>
                </div>
              </div>
              <div class="timesTitle">作用时间段</div>
              <div class="times">
                <div class="startText">开始时间：</div>
                <div class="startTime">{{ item.startTime }}</div>
              </div>
              <div class="times">
                <div class="startText">结束时间：</div>
                <div class="startTime">{{ item.endTime }}</div>
              </div>
              <div class="btns">
                <div class="btn" @click="edit(item, item.id)">编辑</div>
              </div>
            </div>
          </div>

          <div class="titles">
            <div class="border"></div>
            <div class="title">当前公告</div>
          </div>
          <div
            :class="[
              'announcements',
              item.status == 1 && item.currentState == 1
                ? ''
                : 'announcements1',
            ]"
            v-for="item in otherList"
            :key="item.id"
          >
            <div class="left">
              <div class="list">
                <div class="modes">
                  <div :class="['deliverys', item.status == 0 ? 'gray' : '']">
                    <img
                      class="img"
                      src="~@/assets/img/notice/NOTICE_ICON.png"
                    />
                    <div>
                      <div class="deliverysTitle">系统公告</div>
                      <div class="deliverysText">{{ item.remark }}</div>
                    </div>
                  </div>
                  <div
                    :class="['deliverysBtn', item.status == 0 ? 'gray' : '']"
                    @click="changeItem(item)"
                  >
                    <i class="el-icon-switch-button"></i>
                  </div>
                </div>
                <div class="status">
                  <div class="statusName">开启状态:</div>
                  <div
                    class="statusText"
                    :style="{ color: item.status == 1 ? '#1890FF' : '#D1291B' }"
                  >
                    {{ item.status == 1 ? "运行中" : "禁用中" }}
                  </div>
                </div>
                <div class="status">
                  <div class="statusName">当前状态:</div>
                  <div
                    class="statusText"
                    :style="{
                      color: item.currentState == 1 ? '#1890FF' : '#D1291B',
                    }"
                  >
                    {{ item.currentState == 1 ? "启用中" : "已停用" }}
                  </div>
                </div>
                <div class="status">
                  <div class="statusName">出现频率:</div>
                  <div
                    class="statusText"
                    :class="[item.status == 0 ? 'gray' : '']"
                  >
                    <el-tag color="#1890FF" effect="dark">
                      {{ item.frequency == 1 ? "每次都有" : "每天一次" }}
                    </el-tag>
                  </div>
                </div>

                <div class="status">
                  <div class="statusName">运行方式:</div>
                  <div
                    class="statusText"
                    :class="[item.status == 0 ? 'gray' : '']"
                  >
                    <el-tag
                      :type="item.runMode == 1 ? 'success' : 'danger'"
                      effect="dark"
                    >
                      {{ item.runMode == 1 ? "时间段内启用" : "时间段内停用" }}
                    </el-tag>
                  </div>
                </div>

                <div class="timesTitle">作用时间段</div>
                <div class="times">
                  <div class="startText">开始时间：</div>
                  <div class="startTime">{{ item.startTime }}</div>
                </div>
                <div class="times">
                  <div class="startText">结束时间：</div>
                  <div class="startTime">{{ item.endTime }}</div>
                </div>
              </div>
            </div>
            <div class="right">
              <div class="announcementTitle">公告标题</div>
              <el-input
                disabled
                type="text"
                placeholder="请输入公告标题"
                v-model="item.title"
                maxlength="10"
                show-word-limit
              >
              </el-input>
              <div class="announcementTitle" style="margin-top: 15px">
                公告内容
              </div>
              <el-input
                disabled
                :autosize="{ minRows: 6, maxRows: 6 }"
                class="textarea"
                type="textarea"
                placeholder="请输入公告内容"
                v-model="item.content"
                maxlength="200"
                show-word-limit
              >
              </el-input>
              <p class="tips">
                <span v-if="item.code == 'HOME_PAGE_NOTICE'"
                  >*公告显示位置在小程序首页</span
                >
                <span v-if="item.code == 'O2O_CONFIRM_NOTICE'"
                  >*公告显示位置在O2O支付结算页面</span
                >
                <span v-if="item.code == 'CBM_CONFIRM_NOTICE'"
                  >*公告显示位置在餐边码支付结算页面</span
                >
              </p>
            </div>
            <div class="btns">
              <div class="btn" @click="editItem(item)">编辑</div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="历史记录" name="2">
        <div class="tables">
          <div class="inputs">
            <div class="name">操作功能项</div>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="searchBtns">
            <el-button type="primary" @click="searchData">查询</el-button>
            <el-button @click="Reset">重置</el-button>
          </div>
          <el-table
            :header-cell-style="{
              background: ' #FAFBFE',
              color: '#ADB8D0',
              fontWeight: 400,
            }"
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column prop="createTime" label="操作时间">
            </el-table-column>
            <el-table-column prop="account" label="操作账号"> </el-table-column>
            <el-table-column prop="typeName" label="操作功能项">
            </el-table-column>
            <el-table-column prop="secondTypeName" label="操作功能点">
            </el-table-column>
            <el-table-column prop="handle" label="操作内容"> </el-table-column>
            <el-table-column
              prop="startTime"
              label="编辑后-开始时间"
              align="center"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.startTime ? scope.row.startTime : "-" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="endTime"
              label="编辑后-截止时间"
              align="center"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.endTime ? scope.row.endTime : "-" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="title"
              label="编辑后-公告标题"
              show-overflow-tooltip
              align="center"
              width="80px"
            >
              <template slot-scope="scope">
                <div class="line-1">
                  {{ scope.row.title ? scope.row.title : "-" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="content"
              label="编辑后-公告内容"
              show-overflow-tooltip
              align="center"
              width="80px"
            >
              <template slot-scope="scope">
                <div class="line-1">
                  {{ scope.row.content ? scope.row.content : "-" }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-pagination
      v-if="activeName == 2"
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="total"
    >
    </el-pagination>
    <addNotice @confirm="openConfirmMessage" ref="add" />
    <addItem @confirm="openConfirmMessage" ref="addI" />
    <noticeMessage ref="mess" />
    <itemMessage ref="messItem" />
    <confirmMessage ref="confirmMessage" />
  </div>
</template>

<script>
import addNotice from "./addNotice.vue";
import addItem from "./addItem.vue";
import noticeMessage from "./noticeMessage.vue";
import itemMessage from "./itemMessage.vue";
import confirmMessage from "./confirmMessage.vue";

export default {
  data() {
    return {
      rules: null,
      curList: [],
      otherList: [],
      name: "",
      showTab: true,
      activeName: "1",
      tableData: [],
      options: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "1",
          label: "楼内闪送",
        },
        {
          value: "2",
          label: "国内快递",
        },
        {
          value: "3",
          label: "到店自提",
        },
        {
          value: "4",
          label: "银联支付",
        },
        {
          value: "5",
          label: "金豆支付",
        },
        {
          value: "6",
          label: "首页公告",
        },
        {
          value: "7",
          label: "o2o结算页",
        },
        {
          value: "8",
          label: "餐边码结算页",
        },
      ],
      value: "",
      total: 0,
      current: 1,
    };
  },
  components: {
    addNotice,
    noticeMessage,
    addItem,
    itemMessage,
    confirmMessage,
  },
  created() {},
  mounted() {
    this.getDataList();
    this.getData();
  },
  watch: {
    activeName() {
      this.getDataList();
      this.getData();
    },
  },
  methods: {
    getIcon(item) {
      return require(`@/assets/img/notice/${item.code}_ICON.png`);
    },
    getData() {
      this.$http({
        url: this.$http.adornUrl(
          `/platform/noticeNew/log/page?size=10&current=${this.current}&type=${this.value}`
        ),
        method: "get",
      }).then(({ data }) => {
        this.tableData = data.records;
        this.total = data.total;
      });
    },
    openConfirmMessage(refKey) {
      this.$refs.confirmMessage.open({ refKey });
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getData();
    },
    getDataList() {
      this.$http({
        url: this.$http.adornUrl("/platform/noticeNew/list"),
        method: "get",
      }).then(({ data }) => {
        const codeMapping = {
          FLASH_SEND: "配送方式",
          EXPRESS_DELIVERY: "配送方式",
          USER_PICK_UP: "配送方式",
          PAY_YL: "支付方式",
          PAY_BALANCE: "支付方式",
        };
        const otherMapping = {
          HOME_PAGE_NOTICE: "首页公告",
          CBM_CONFIRM_NOTICE: "餐边码结算页",
          O2O_CONFIRM_NOTICE: "O2O结算页",
        };
        let curList = [];
        let otherList = [];
        data.forEach((item) => {
          if (codeMapping[item.code]) {
            item.name = codeMapping[item.code];
            curList.push(item);
          } else {
            otherList.push(item);
          }
        });
        this.curList = curList.sort((a, b) => {
          return (
            Object.keys(codeMapping).indexOf(a.code) -
            Object.keys(codeMapping).indexOf(b.code)
          );
        });
        this.otherList = otherList.sort((a, b) => {
          return (
            Object.keys(otherMapping).indexOf(a.code) -
            Object.keys(otherMapping).indexOf(b.code)
          );
        });
      });
    },
    edit(item, id) {
      this.$refs.add.open({ ...item }, id);
    },
    change(item, id) {
      this.$refs.mess.open({ ...item }, id);
    },
    changeItem(item) {
      this.$refs.messItem.open({ ...item });
    },
    editItem(item) {
      this.$refs.addI.open({ ...item });
    },
    searchData() {
      this.current = 1;
      this.getData();
    },
    Reset() {
      this.value = "";
      this.current = 1;
      this.getData();
    },
  },
};
</script>
<style lang="scss" scoped>
.line-1 {
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  white-space: nowrap; //溢出不换行
}
.el-pagination {
  margin-top: 10px;
}
.titles {
  display: flex;
  margin-top: 10px;
  margin-bottom: 15px;
  clear: both;
  .border {
    width: 4px;
    height: 14px;
    background: #1890ff;
    border-radius: 1px;
  }
  .title {
    font-family: PingFangSC-Medium, PingFangSC-Medium;
    font-weight: normal;
    font-size: 14px;
    color: #333333;
    margin-left: 10px;
  }
}
.cont {
  width: 100%;
  .lists {
    width: 100%;
    .list {
      width: 17%;
      min-width: 254px;
      background: #f8fcff;
      float: left;
      margin-right: 2%;
      margin-bottom: 20px;
      box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
      border-radius: 9px 9px 9px 9px;
      border: 1px solid #1890ff;
      padding: 20px;
      box-sizing: border-box;
      margin-bottom: 20px;
      .modes {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .deliverys {
          display: flex;
          align-items: center;
          .img {
            width: 60px;
            height: 60px;
            margin-right: 10px;
          }
          .deliverysTitle {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 16px;
            color: #908c8c;
          }
          .deliverysText {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #1890ff;
            margin-top: 10px;
          }
        }
        .deliverysBtn {
          width: 40px;
          height: 40px;
          background: #1890ff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          .el-icon-switch-button {
            font-size: 28px;
            color: #fff;
          }
        }
      }
      .status {
        font-size: 16px;
        display: flex;
        align-items: center;
        margin-top: 15px;
        border-bottom: 2px solid #d9d9d9;
        padding-bottom: 12px;
        .statusName {
          color: #908c8c;
        }
        .statusText {
          color: #1890ff;
          margin-left: 20px;
        }
      }
      .timesTitle {
        font-family: PingFangSC-Medium, PingFangSC-Medium;
        font-weight: normal;
        font-size: 16px;
        color: rgba(144, 140, 140, 0.8);
        margin-top: 20px;
      }
      .times {
        display: flex;
        font-family: PingFangSC-Medium, PingFangSC-Medium;
        font-weight: normal;
        font-size: 16px;
        color: rgba(144, 140, 140, 0.8);
        margin-top: 20px;
      }
      .btns {
        width: 100%;
        display: flex;
        justify-content: right;
        margin-top: 40px;
        .btn {
          width: 80px;
          height: 40px;
          background: #1890ff;
          border-radius: 10px 10px 10px 10px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #ffffff;
          text-align: center;
          line-height: 40px;
        }
      }
    }
    .list1 {
      background: #f5f5f5;
      box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
      border-radius: 9px 9px 9px 9px;
      border: 1px solid rgba(144, 140, 140, 0.8);
      margin-bottom: 20px;
    }
  }
  .announcements {
    width: 36%;
    min-width: 556px;
    background: #f8fcff;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #1890ff;
    margin-top: 20px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    position: relative;
    float: left;
    margin-right: 20px;
    .left {
      width: 45%;
      .list {
        width: 100%;
        .modes {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .deliverys {
            display: flex;
            align-items: center;
            .img {
              width: 60px;
              height: 60px;
              margin-right: 10px;
            }
            .deliverysTitle {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 16px;
              color: #333333;
            }
            .deliverysText {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 14px;
              color: #1890ff;
              margin-top: 10px;
            }
          }
          .deliverysBtn {
            width: 40px;
            height: 40px;
            background: #1890ff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            .el-icon-switch-button {
              font-size: 28px;
              color: #fff;
            }
          }
        }
        .status {
          font-size: 16px;
          display: flex;
          align-items: center;
          margin-top: 15px;
          border-bottom: 2px solid #d9d9d9;
          padding-bottom: 12px;
          .statusName {
            color: #908c8c;
          }
          .statusText {
            color: #1890ff;
            margin-left: 20px;
          }
        }
        .border {
          width: 100%;
          height: 0px;
          border: 2px solid rgba(217, 217, 217, 0.8);
          margin-top: 25px;
        }
        .timesTitle {
          font-family: PingFangSC-Medium, PingFangSC-Medium;
          font-weight: normal;
          font-size: 16px;
          color: rgba(144, 140, 140, 0.8);
          margin-top: 20px;
        }
        .times {
          display: flex;
          font-family: PingFangSC-Medium, PingFangSC-Medium;
          font-weight: normal;
          font-size: 16px;
          color: rgba(144, 140, 140, 0.8);
          margin-top: 20px;
        }
      }
    }
    .right {
      width: 45%;
      .announcementTitle {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        margin-bottom: 10px;
      }
      .tips {
        margin-top: 22px;
        font-size: 14px;
        color: rgba(144, 140, 140, 0.8);
      }
    }
    .btns {
      position: absolute;
      right: 20px;
      bottom: 20px;
      .btn {
        width: 80px;
        height: 40px;
        background: #1890ff;
        border-radius: 10px 10px 10px 10px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        line-height: 40px;
      }
    }
  }
  .announcements1 {
    background: #f5f5f5 !important;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16) !important;
    border-radius: 9px 9px 9px 9px !important;
    border: 1px solid rgba(144, 140, 140, 0.8) !important;
  }
}
.tables {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  position: relative;
  .searchBtns {
    position: absolute;
    right: 20px;
    top: 0px;
  }
  .inputs {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    margin-top: 15px;
    .name {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 12px;
      color: #5a5a5a;
      margin-right: 10px;
    }
  }
}
.el-table th {
  background: #fafbfe;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #d9d9d9;
}

.gray {
  filter: grayscale(100%);

  &::v-deep .el-tag {
    border-color: transparent !important;
  }
}
</style>
